<template>
  <div class="header-wrapper">
    <div class="header">
      <div
        class="header-left"
      >
        <div class="header-title" @click="titleClick">影推</div>
      </div>
      <div class="header-input">
        <input type="text" v-model="input" class="input" placeholder="请输入查询电影信息" @click="inputClick"/>
        <div class="iconfont search-icon">&#xe782;</div>
      </div>
      <avatar
        class="avatar"
        :imgUrl="this.$store.state.avatar"
        @sidebar="$emit('sidebar')"
        v-if="this.$store.state.userStatus"
        @click.native="avatarClick"
      />
      <div class="header-user" @click="$emit('userbox')" v-else>
        <div class="iconfont user-icon">
          &#xe636;
        </div>
      </div>
    </div>
    <div
      class="search-content"
      ref="search"
      v-show="input"
    >
      <div>
        <div
          v-for="item of list"
          :key="item.movie_id"
          :data-id="item.movie_id"
          class="search-item border-bottom"
          @click.prevent="itemClick"
        >
          {{item.name}}
        </div>
        <div class="search-item border-bottom" v-if="!list.length">未找到匹配电影</div>
      </div>
    </div>
  </div>
</template>

<script>
import Avatar from 'common/avatar/Avatar.vue'
import axios from 'axios'
import { animateCSS } from 'common/animate.js'
import qs from 'qs'
export default {
  name: 'HomeHeader',
  data () {
    return {
      input: '',
      list: [{
        id: 1,
        content: 'godd'
      }],
      aniList: ['bounce', 'flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'headShake', 'swing', 'tada',
        'wobble', 'jello', 'heartBeat']
    }
  },
  components: {
    Avatar
  },
  mounted () {
    if (this.$store.state.userStatus) this.updateUserInfo()
  },
  methods: {
    getDetailInfo () {
      axios.post('/api/allClass', qs.stringify({
        search: this.input
      })).then(this.getDataSucc)
    },
    getDataSucc (res) {
      res = res.data
      this.list = res.data.movieList
    },
    itemClick (e) {
      this.$router.push('/detail/' + e.target.dataset.id)
    },
    updateUserInfo () {
      axios.post('/api/usr/usrInfo').then(this.updateInfoSucc)
    },
    updateInfoSucc (res) {
      res = res.data.data
      this.$store.commit('changeNickname', {
        nickname: res.nickname
      })
      this.$store.commit('changeAvatar', {
        avatar: res.head_pic
      })
    },
    titleClick (e) {
      let id = Math.floor(Math.random() * this.aniList.length)
      animateCSS(e.target, this.aniList[id])
    },
    avatarClick (e) {
      animateCSS(e.target, 'bounceIn')
    },
    inputClick (e) {
      animateCSS(e.target, 'headShake')
    }
  },
  watch: {
    input () {
      this.getDetailInfo()
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .header-wrapper
    .header
      position: fixed
      top: 0
      left: 0
      right: 0
      background: #228fbd
      height: .6rem
      display: flex
      z-index: 999
      .header-title
        width: .50rem
        color: #fff
        font-size: .23rem
        line-height:.30rem
        text-align: center
        padding: .16rem 0
        margin-left: .09rem
      .avatar
        margin: .1rem .1rem
      .header-input
        flex: 1
        overflow:hidden
        padding: .1rem
        box-sizing: border-box
        position: relative
        height:100%
        .input
          width: 100%
          height: 100%
          border-radius: .1rem
          font-size: .16rem
          padding-left: .10rem
        .search-icon
          position: absolute
          color: #ccc
          font-size: .20rem
          top: .20rem
          right: .15rem
      .user-icon
        width: .50rem
        color: #fff
        font-size: .30rem
        text-align: center
        padding: .15rem 0
        margin-right: .05rem
    .search-content
      position: fixed
      top: .60rem
      left: 0
      right: 0
      bottom: 0
      z-index: 3
      background: #eee
      overflow-y: auto
      .search-item
        font-size: .17rem
        line-height: .35rem
        height: .35rem
        padding-left: .20rem
        background: #fff
        color: #666
        overflow-x: hidden
        text-overflow: ellipsis
</style>
